<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cake Gallery & Shop - Antonio's perfect cakes</title>
    <meta name="description" content="Browse our collection of artisan cakes. View details, prices, and place your order inquiry.">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <div class="container header-container">
            <a href="index.html" class="brand-logo">Antonio's perfect cakes</a>
            <nav class="main-nav" id="main-nav">
                <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
                    <span class="hamburger"></span>
                </button>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="gallery.html" class="active">Gallery & Shop</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                     <!-- Optional: Placeholder Cart Icon
                    <li><a href="#" class="cart-icon" aria-label="Shopping Cart">(0)</a></li>
                    -->
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="page-header section-padding">
            <div class="container">
                <h1>Our Cake Collection</h1>
                <p>[Browse our signature cakes or contact us for a custom creation.]</p>
            </div>
        </section>

        <section class="cake-gallery section-padding">
            <div class="container">
                <div class="cake-grid shop-grid">
                    <!-- Cake Item 1 -->
                    <div class="cake-card" id="cake1">
                        <img src="https://source.unsplash.com/random/400x300/?cake,chocolate,fudge" alt="Chocolate Fudge Cake - Placeholder" loading="lazy">
                        <!-- TODO: Replace with actual cake image -->
                        <h3>[Classic Chocolate Fudge]</h3>
                        <p>[Rich, decadent chocolate cake with smooth fudge frosting...]</p>
                        <span class="price">$55.00</span>
                        <!-- TODO: Update cake details and price -->
                        <button class="cta-button add-to-cart-btn">Add to Cart</button>
                        <!-- NOTE: 'Add to Cart' button is a placeholder. Full e-commerce requires backend development. -->
                    </div>

                    <!-- Cake Item 2 -->
                    <div class="cake-card" id="cake2">
                        <img src="https://source.unsplash.com/random/400x300/?cake,strawberry,cream" alt="Strawberry Dream Cake - Placeholder" loading="lazy">
                         <!-- TODO: Replace with actual cake image -->
                        <h3>[Strawberry Dream]</h3>
                        <p>[Light vanilla sponge layered with fresh strawberries and cream...]</p>
                        <span class="price">$60.00</span>
                         <!-- TODO: Update cake details and price -->
                        <button class="cta-button add-to-cart-btn">Add to Cart</button>
                         <!-- NOTE: 'Add to Cart' button is a placeholder. -->
                    </div>

                    <!-- Cake Item 3 -->
                    <div class="cake-card" id="cake3">
                        <img src="https://source.unsplash.com/random/400x300/?cake,custom,celebration" alt="Custom Celebration Cake - Placeholder" loading="lazy">
                         <!-- TODO: Replace with actual cake image -->
                        <h3>[Custom Celebration Cake]</h3>
                        <p>[Tailored design for birthdays, weddings, anniversaries. Contact for consultation.]</p>
                        <span class="price">Starts at $80.00</span>
                         <!-- TODO: Update cake details and price -->
                        <a href="contact.html" class="button-secondary">Request Quote</a>
                    </div>

                     <!-- Cake Item 4 -->
                    <div class="cake-card" id="cake4">
                        <img src="https://source.unsplash.com/random/400x300/?cake,red,velvet" alt="Red Velvet Delight - Placeholder" loading="lazy">
                        <!-- TODO: Replace with actual cake image -->
                        <h3>[Red Velvet Delight]</h3>
                        <p>[Classic red velvet cake with luscious cream cheese frosting...]</p>
                        <span class="price">$58.00</span>
                        <!-- TODO: Update cake details and price -->
                        <button class="cta-button add-to-cart-btn">Add to Cart</button>
                        <!-- NOTE: 'Add to Cart' button is a placeholder. -->
                    </div>

                     <!-- Cake Item 5 -->
                    <div class="cake-card" id="cake5">
                        <img src="https://source.unsplash.com/random/400x300/?cake,lemon,tart" alt="Lemon Zest Cake - Placeholder" loading="lazy">
                        <!-- TODO: Replace with actual cake image -->
                        <h3>[Lemon Zest Cake]</h3>
                        <p>[Tangy lemon cake with a light lemon glaze, perfect for brunch...]</p>
                        <span class=\"price\">$50.00</span>
                        <!-- TODO: Update cake details and price -->
                        <button class=\"cta-button add-to-cart-btn\">Add to Cart</button>
                        <!-- NOTE: \'Add to Cart\' button is a placeholder. -->
                    </div>

                     <!-- Cake Item 6 -->
                     <div class=\"cake-card\" id=\"cake6\">
                        <img src=\"https://source.unsplash.com/random/400x300/?cupcakes\" alt=\"Assorted Cupcakes - Placeholder\" loading=\"lazy\">
                        <!-- TODO: Replace with actual cupcake image -->
                        <h3>[Assorted Cupcakes]</h3>
                        <p>[A selection of our popular flavors, available by the dozen.]</p>
                        <span class=\"price\">$36.00 / dozen</span>
                        <!-- TODO: Update details and price -->
                        <button class=\"cta-button add-to-cart-btn\">Add to Cart</button>
                        <!-- NOTE: \'Add to Cart\' button is a placeholder. -->
                    </div>

                    <!-- TODO: Add more cake items as needed -->

                </div>
                 <p class=\"disclaimer text-center top-margin\">
                    <strong>Please note:</strong> The \"Add to Cart\" functionality is for display purposes only in this basic template. Full online ordering requires further development. Please use the <a href=\"contact.html\">Contact Form</a> for inquiries or custom orders.
                 </p>
            </div>
        </section>
    </main>

    <footer class=\"site-footer\">
        <div class=\"container\">
             <p>&copy; <span id=\"current-year\"></span> Antonio\'s perfect cakes. All Rights Reserved.</p>
             <!-- Optional: Add social media links here -->
        </div>
    </footer>

    <script src=\"script.js\"></script>
</body>
</html>